<template>
  <view>
    <scroll-view 
			:refresherEnabled="true" :scroll-y="true" :showScrollbar="true"
			style="height: 1000px;">
      <Cst-IntroductionSwiper :bannerList="bannerList" />
      <view style="height: auto; background-color: #F4E8DA;">
        <uni-row>
          <uni-col :span="1">
            &nbsp;
          </uni-col>
          <uni-col :span="22">
            <view style="height: 20px;">&nbsp;</view>
            <view class="logo-box">
              <uni-row>
                <uni-col :span="1">
                  &nbsp;
                </uni-col>
                <uni-col :span="10">
                  <view class="logo-class">多福</view>
                </uni-col>
                <uni-col :span="4">
                  <view class="logo-text">
                    <view>
                      <text>余额</text>
                    </view>
                    <view class="logo-star">
                      <view class="logo-star-group">
                        <uv-icon name="star-fill" color="#FFFFFF" size="12"></uv-icon>
                        <uv-icon name="star-fill" color="#FFFFFF" size="12"></uv-icon>
                      </view>
                    </view>
                  </view>
                </uni-col>
                <uni-col :span="4">
                  <view class="logo-text">
                    <view>
                      <text>优惠券</text>
                    </view>
                    <view class="logo-star">
                      <view class="logo-star-font">
                        <text>0</text>
                      </view>
                    </view>
                  </view>
                </uni-col>
                <uni-col :span="4">
                  <view class="logo-text">
                    <view>
                      <text>积分</text>
                    </view>
                    <view class="logo-star">
                      <view class="logo-star-group">
                        <uv-icon name="star-fill" color="#FFFFFF" size="12"></uv-icon>
                        <uv-icon name="star-fill" color="#FFFFFF" size="12"></uv-icon>
                      </view>
                    </view>
                  </view>
                </uni-col>
                <uni-col :span="1">
                  &nbsp;
                </uni-col>
              </uni-row>
            </view>
            <view style="height: 20px;">&nbsp;</view>
            <view>
              <view style="width: 100%;">
                <view style="background-color: #F7F7F7; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px; padding-top: 15px; padding-bottom: 15px;">
                  <view class="order-class">
                    <uni-row>
                      <uni-col :span="12">
                        <view style="border-right: 1px solid #E0E0E0;">
                          <view style="font-size: 50rpx; font-weight: bolder; color: #5B5B5B; padding-left: 15px;">到店自提</view>
                          <view style="padding-left: 15px; margin-top: 5px;">
                            <view style="border: 2px solid #E0E0E0; border-radius: 30px; width: 60%; font-size: 20rpx; text-align: center; color: #808080;">
                              <text>提前点餐，到店立取</text>
                            </view>
                          </view>
                          <uni-row>
                            <uni-col :span="14">&nbsp;</uni-col>
                            <uni-col :span="10">
                              <image style="height: 70px; width: 70px; padding-right: 15px;" src="../../static/shouye/dabao.png" mode="aspectFit"/>
                            </uni-col>
                          </uni-row>
                        </view>
                      </uni-col>
                      <uni-col :span="12">
                        <view>
                          <view style="font-size: 50rpx; font-weight: bolder; color: #5B5B5B; padding-left: 15px;">外卖点单</view>
                          <view style="padding-left: 15px; margin-top: 5px;">
                            <view style="border: 2px solid #E0E0E0; border-radius: 30px; width: 60%; font-size: 20rpx; text-align: center; color: #808080;">
                              <text>满30元立享88折</text>
                            </view>
                          </view>
                          <uni-row>
                            <uni-col :span="14">&nbsp;</uni-col>
                            <uni-col :span="10">
                              <image style="height: 70px; width: 70px; padding-right: 15px;" src="../../static/shouye/waimai.png" mode="aspectFit"/>
                            </uni-col>
                          </uni-row>
                        </view>
                      </uni-col>
                    </uni-row>
                  </view>
                </view>
              </view>
            </view>
            <view style="height: 20px;">&nbsp;</view>
            <view>
              <uni-row>
                <uni-col :span="11">
                  <view>
                    <view style="width: 100%;">
                      <view style="background-color: #F7F7F7; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px; padding-top: 15px;">
                        <view class="order-class">
                          <view>
                            <view style="font-size: 40rpx; font-weight: bolder; color: #5B5B5B; padding-left: 15px;">积分兑换</view>
                            <view style="padding-left: 15px; margin-top: 5px;">
                              <view style="border: 2px solid #E0E0E0; border-radius: 30px; width: 60%; font-size: 18rpx; text-align: center; color: #808080;">
                                <text>积分当钱花，好菜兑换</text>
                              </view>
                            </view>
                            <uni-row>
                              <uni-col :span="14">&nbsp;</uni-col>
                              <uni-col :span="10">
                                <view style="float: right;">
                                  <view style="background-color: #FFD601; border-top-left-radius: 35px; border-bottom-left-radius: 35px; border-top-right-radius: 35px; height: 75px; width: 75px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                                    <image style="height: 50px; width: 50px;" src="../../static/shouye/liwu.png" mode="aspectFit"/>
                                  </view>
                                </view>
                              </uni-col>
                            </uni-row>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </uni-col>
                <uni-col :span="2">&nbsp;</uni-col>
                <uni-col :span="11">
                  <view>
                    <view style="width: 100%;">
                      <view style="background-color: #F7F7F7; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px; padding-top: 15px;">
                        <view class="order-class">
                          <view>
                            <view style="font-size: 40rpx; font-weight: bolder; color: #5B5B5B; padding-left: 15px;">会员中心</view>
                            <view style="padding-left: 15px; margin-top: 5px;">
                              <view style="border: 2px solid #E0E0E0; border-radius: 30px; width: 60%; font-size: 18rpx; text-align: center; color: #808080;">
                                <text>加入会员，好礼不断</text>
                              </view>
                            </view>
                            <uni-row>
                              <uni-col :span="14">&nbsp;</uni-col>
                              <uni-col :span="10">
                                <view style="float: right;">
                                  <view style="background-color: #FFD601; border-top-left-radius: 35px; border-bottom-left-radius: 35px; border-top-right-radius: 35px; height: 75px; width: 75px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                                    <image style="height: 50px; width: 50px;" src="../../static/shouye/huiyuan.png" mode="aspectFit"/>
                                  </view>
                                </view>
                              </uni-col>
                            </uni-row>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </uni-col>
              </uni-row>
            </view>
            <view style="height: 20px;">&nbsp;</view>
          </uni-col>
          <uni-col :span="1">
            &nbsp;
          </uni-col>
        </uni-row>
        <view style="height: 20px;">&nbsp;</view>
        <view style="height: 20px;">&nbsp;</view>
      </view>
    </scroll-view>
  </view>
</template>



<script setup lang="ts">
import { ref } from 'vue'
import type { BannerItem, CardItem } from '@/types/home'
import {onLoad} from '@dcloudio/uni-app'


// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])

class Banner implements BannerItem{
	hrefUrl!: string;
	/** id */
	id!: string;
	/** 图片链接 */
	imgUrl!: string;
	/** 跳转类型 */
	type!: number;

	constructor(hrefUrl: string, id: string, imgUrl: string, type: number){
		this.hrefUrl = hrefUrl;
		this.id = id;
		this.imgUrl = imgUrl;
		this.type = type;
	}
}


onLoad(() => {
	

	bannerList.value.push(new Banner("", "123", "../../static/introduction/yusheng01.jpg", 2))
	bannerList.value.push(new Banner("", "124", "../../static/introduction/yusheng02.jpg", 3))
	bannerList.value.push(new Banner("", "125", "../../static/introduction/yusheng03.jpg", 4))

})




</script>



<style lang="scss" >


</style>

<style lang="scss" scoped>
.order-class {
  background-color: #F7F7F7;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-box {
  height: 60px;
  background-color: #FBBD08;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .logo-class {
    height: 40px;
    width: 40px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    font-size: 28rpx;
    text-align: center;
    display: flex;
    color: #FFFFFF;
    flex-direction: column;
    justify-content: center;
  }
  .logo-text {
    text-align: center;
    color: #FFFFFF;
    font-size: 28rpx;

    .logo-star {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .logo-star-font {
        font-size: 38rpx;
      }

      .logo-star-group {
        padding-top: 5px;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }
  }
}
</style>